<template>
  <div>
    <el-form :model="formData" :rules="rules" ref="form" label-width="100px">
      <el-form-item label="菜品名称" prop="dishName">
        <el-input class="mw300" v-model="formData.dishName"></el-input>
      </el-form-item>
<!--      <el-form-item label="金额" prop="score">-->
<!--        <el-input type="number" oninput="if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}" class="mw300" v-model="formData.score"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="就餐时间" prop="timeRange">
        <el-select v-model="formData.timeRange" placeholder="请选择就餐时间域">
          <el-option v-for="item in gearList" :key="item.id" :label="item.name" :value="item.value"></el-option>
        </el-select>
<!--        <el-button type="text" @click="addGearsClick">不够用？前往添加</el-button>-->
      </el-form-item>
<!--      <el-form-item label="最多可点" prop="dishLimit">-->
<!--        <el-input-number v-model="formData.dishLimit" :min="1" :max="100" label="描述文字"></el-input-number>-->
<!--        <span class="gray font13 ml-10">(默认1份)</span>-->
<!--      </el-form-item>-->
      <el-form-item label="生效日期" prop="targetDate">
        <el-date-picker type="date" placeholder="选择生效日期" v-model="formData.targetDate"
        format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
<!--      <el-form-item label="是否赠送" prop="flagSend">-->
<!--        <el-switch v-model="formData.flagSend"></el-switch>-->
<!--        <div class="gray font12">若为赠送菜品，则金额强制为0</div>-->
<!--      </el-form-item>-->
      <el-form-item label="备注" prop="remark">
        <el-input class="mw300" type="textarea" v-model="formData.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addDishClick">添加当前菜品</el-button>
        <el-button type="primary" :disabled="tableData.length===0" @click="submitClick">提交所有</el-button>
        <el-button @click="$router.back()">取消</el-button>
      </el-form-item>
      <el-form-item label="" prop="" v-if="tableData.length>0">
        <div class="bolder">预览</div>
        <el-table :data="tableData" height="300" stripe style="width: 100%;" border>
          <el-table-column prop="dishName" label="菜品名称"></el-table-column>
<!--          <el-table-column prop="score" label="金额" width="100"></el-table-column>-->
          <el-table-column prop="timeRange" label="就餐时间">
            <template scope="scope">
              {{getOrderTimetext(scope.row)}}
            </template>
          </el-table-column>
          <el-table-column prop="targetDate" label="生效日期"></el-table-column>
<!--          <el-table-column prop="flagSend" label="是否赠送" width="100">-->
<!--            <template scope="scope">-->
<!--              {{scope.row.flagSend===1?'是':'否'}}-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column prop="flagSend" label="操作" width="80">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {ORDERING_GET_GEARS_LIST, ORDERING_ORDERING_POST} from "@/assets/const/api";
import {getStore} from "js-utils";
import {getRandomKey} from "@/config/util";
import {mapState} from "vuex";

export default {
    name: '',
    mixins: [],
    components: {},
    props: {},
    data () {
        return {
          tableData:[],
          gearList:[],
          formData:{
            dishName:'',
            timeRange:0,
            createPerson:'',
            remark:'',
            flagSend:false,
            targetDate:'',
            dishLimit:1
          },
          rules:{
            dishName:[{ required: true, message: '菜品名称不能为空', trigger: 'blur' }],
            targetDate:[{ required: true, message: '生效时间不能为空', trigger: 'blur' }],
          }
        }
    },
    computed: {
      userInfo(){
        return this.$store.state.userInfo||{};
      }
    },
    watch: {},
    created() {
      this.getGears()
    },
    mounted () {},
    methods: {
      getGears(){
        this.$http.get(ORDERING_GET_GEARS_LIST).then(res=>{
          if(res.code === 200){
            this.gearList = res.data||[]
            let first = this.gearList[0]
            this.formData.timeRange = first.value
          }
        })
      },
      deleteClick(row){
        this.tableData = this.tableData.filter(v=>v.key!==row.key)
      },
      submitClick(){
        this.tableData.forEach(dish=>{
          dish['createPerson'] = this.userInfo.id
        })
        let dic = {dishList:this.tableData}
        this.$http.post(ORDERING_ORDERING_POST,dic).then(res=>{
          if(res.code === 200){
            this.$message.success('提交成功')
            this.tableData = []
            this.formData = {dishName:'',  score:0, timeRange:0, createPerson:'', remark:'',
                  flagSend:false,targetDate:'', dishLimit:1}
          }
        })
      },
      addGearsClick(){

      },
      getOrderTimetext(row){
        let gear = this.gearList.find(v=>v.value === row.timeRange)
        if (gear){
          return gear.ableStartTime +'-' +gear.ableEndTime
        }
        return '-'
      },
      addDishClick(){
        this.$refs['form'].validate((valid, object) => {
          if (valid) {
            let dic = {...this.formData}
            dic.flagSend = dic.flagSend?1:0
            dic['key'] = getRandomKey()
            this.tableData.push(dic)
          } else {
            let key = Object.keys(object)[0];
            this.$message.error(object[key][0].message);
            return false;
          }
        });
      }
    }
}
</script>

<style scoped lang="scss">

</style>